<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排行榜</title>
    <script src="js/jquery/jquery.form.js"></script>
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/js-cookie/js.cookie.min.js"></script>
    <script src="js/vue/vue.min.js"></script>
</head>
<body>
<div id="app">
    <form id="rankFormId">
        <table>
            <tr>
                <td>
                    <table border="0">
                        <tr>
                            <td>姓名</td>
                            <td>操作</td>
                        </tr>
                        <tr v-for="item in ranklist">
                            <td>{{item.name}}</td>
                            <td><input type="button" value="+1" @click="addRank(item)"></td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table border="1">
                        <tr>
                            <td>排行</td>
                        </tr>
                        <tr v-for="item in ranks">
                            <td>{{item.name}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </form>

</div>

</body>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            ranklist:[],
            ranks:[]
        },
        methods:{
            addRank:function (item) {
                var id = item.id;
                var _this = this;
                $.get("http://localhost:8080/rank/addRankRedis", {id:id}, function (data) {
                    _this.ranks = data.data;
                });
            }
        },
        mounted:function () {
            var _this = this;
            $.get("http://localhost:8080/rank/list",{},function (data) {
                _this.ranklist = data.data;
                _this.ranks = data.data;
            })
        }
    });
</script>
</html>